<template>
    <div class="zwyVideoBox" :style="{ height: '100vh' }" v-if="viewBox">
        <!-- #ifdef MP-TOUTIAO -->
        <video-player
            album-id="7224408250047791628" 
            episode-id="7224408340187906612"
            object-fit="cover"
            style="height: 100%; width: 100vw;"
            autoplay
            id="myVideo"
            @play="playVideo"
            @playbackRate="playbackRate"
            @error="handleError"
            :controls="false" 
            :enable-play-gesture="false"
        >
            <view @click.stop="videoClick" style="width: 100vw;height: 100vh;position: relative;z-index: 99;"></view>
        </video-player>
        <!-- #endif -->
        <view v-if="isHideBars" class="video-ctrl">
            <button @click="pauseVideo">暂停</button>
            <button @click="playVideos">播放</button>
        </view>
    </div>
</template>
<script>
export default {
    name: 'videoTest',
    created() {
        setTimeout(() => {
            this.viewBox = true
            this.newContentVideo = uni.createVideoContext(`myVideo`)
        }, 500)
    },
    data() {
        return {
            isHideBars: false,
            viewBox: false,
            newContentVideo: null
        }
    },
    methods: {
        playVideos() {
            this.newContentVideo.play()
        },
        pauseVideo() {
            this.newContentVideo.pause()
        },
        videoClick() {
            this.isHideBars = !this.isHideBars;
             this.videoZan = false
        },
        playVideo(){
            console.log('play')
        },
        playbackRate(e) {
            console.log('back----', e)
        },
        handleError(error) {
            console.log('error----', error)
        }
    }
}
</script>
<style lang="scss" scoped>
.zwyVideoBox {
	bottom: auto;
	background-color: black;
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 98;
}

.video-ctrl {
    position: fixed;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom: calc(env(safe-area-inset-bottom) + 62px);
	width: 100vw;
	height: 18px;
	z-index: 100;
}
</style>